<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入订单号、下单用户id或手机号"
            v-model="queryInfo.query"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleQueryOrder"
            ></el-button> </el-input
        ></el-col>
      </el-row>
      <!-- table表格 -->
      <el-table :data="orderList" border stripe>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div
              class="goods-details"
              v-for="(item, index) in scope.row.order.order_item_list"
              :key="item.id"
            >
              <div class="row">
                <div class="col">
                  {{ index + 1 }}
                </div>
                <div class="col">
                  <div class="goods">
                    <!-- 商品图片 -->
                    <img :src="item.goods_info.cover_url" />

                    <div class="goods-info">
                      <!-- 商品id -->
                      <span>id：{{ item.goods_info.id }}</span>
                      <!-- 商品名称 -->
                      <span>名称：{{ item.goods_info.name }}</span>
                      <span>邮费：{{ item.goods_info.logistics_price }}</span>
                      <!-- 商品重量 -->
                      <span>数量：{{ item.count }}(份)</span>
                    </div>
                  </div>
                </div>

                <!-- 购买个数量 -->
                <!-- <div class="details col">
                  <div>总数量(个)</div>
                  <div>{{ item.goods_count }}</div>
                </div> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="order.id" label="订单编号"> </el-table-column>
        <el-table-column prop="order.total_price" label="订单价格(元)">
        </el-table-column>
        <el-table-column prop="order.total_logistics" label="订单邮费(元)">
        </el-table-column>
        <el-table-column prop="order.real_price" label="实际价格(元)">
        </el-table-column>
        <el-table-column prop="user.id" label="用户id"> </el-table-column>
        <el-table-column prop="user.phone_number" label="用户手机号">
        </el-table-column>
        <el-table-column prop="order.status" label="订单状态">
          <template slot-scope="scope">
            <el-tag
              effect="dark"
              type="info"
              :hit="false"
              :color="colorTag[constValue[scope.row.order.status]]"
            >
              {{ constValue[scope.row.order.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="order.payment_id" label="是否付款">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-if="
                scope.row.order.payment_id != null &&
                scope.row.order.payment_id != 0
              "
            >
              已付款
            </el-tag>
            <el-tag type="danger" v-else> 未付款 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="order.create_time"
          label="下单时间"
          width="150px"
        >
          <template slot-scope="scope">
            {{ scope.row.order.create_time | dateFormat }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!-- 详细信息 -->
            <el-tooltip
              v-if="
                scope.row.order.payment_id != null &&
                scope.row.order.payment_id != 0
              "
              :enterable="false"
              effect="dark"
              content="上传快递信息"
              placement="top"
            >
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                @click="handleShowLogDialog(scope.row.order.id)"
              ></el-button>
            </el-tooltip>

            <!-- 修改按钮 -->
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="修改"
              placement="top"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="showEditDialog(scope.row)"
              ></el-button>
            </el-tooltip>

            <!-- 删除按钮 -->
            <el-tooltip
              :enterable="false"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeById(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 上传快递信息 -->

    <el-dialog
      title="修改/添加订单快递信息"
      :visible.sync="editLogDialog"
      @close="handleCloseEditLog"
      width="40%"
    >
      <el-form
        label-width="100px"
        :model="logFormData"
        :rules="logFormRules"
        ref="logFormRef"
      >
        <el-form-item label="订单id" prop="order_id">
          <el-input v-model="logFormData.order_id" disabled></el-input>
        </el-form-item>

        <el-form-item label="物流公司" prop="company_id">
          <el-select
            v-model="logFormData.company_id"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="物流订单号" prop="number">
          <el-input v-model="logFormData.number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editLogDialog = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleUpdateLog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      orderList: [],
      total: 0,
      constValue: {},
      colorTag: {
        未支付: '#FFA500', // 橙色
        未发货: '#20B2AA', // 浅蓝绿
        已支付: '#52C41A', // 亮绿
        已取消: '#F5222D', // 警示红
        已发货: '#1890FF', // 标准蓝
        未评价: '#FAAD14', // 金橙
        已评价: '#52C41A', // 亮绿
        未收货: '#36CFC9', // 青蓝
        已收货: '#52C41A', // 亮绿
        已退款: '#F5222D' // 警示红
      },
      editLogDialog: false,
      companyList: [],
      logFormData: {
        order_id: '',
        company_id: '',
        number: ''
      },
      logFormRules: {
        order_id: [
          {
            required: true,
            message: '订单id不能为空',
            trigger: 'blur'
          }
        ],
        company_id: [
          {
            required: true,
            message: '请选择物流公司',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '物流单号不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.domain = this.$domain
    this.getOrderList()
    this.getCompanyList()
    for (const key in this.$cv) {
      if (Object.prototype.hasOwnProperty.call(this.$cv, key)) {
        const element = this.$cv[key]
        this.constValue[element.key] = element.name
      }
    }
  },
  methods: {
    async getOrderDetails(id) {
      // 获取订单详情
      const { data: res } = await this.$http.get(
        '/ord/getByOrderId?orderId=' + id
      )

      if (res.code !== 200) {
        this.$message.error(res.msg)
        return null
      }

      return JSON.parse(res.msg)
    },
    async getOrderList() {
      const { data: res } = await this.$http.get('/getOrderListOnAdmin', {
        params: this.queryInfo
      })

      if (res.status !== 200) {
        this.$message.error(res.message)
        return
      }

      // console.log(res)

      this.orderList = res.data.data

      // this.orderList.forEach(async (el) => {
      //   const or = await this.getOrderDetails(el.id)
      //   el.goodsList = or
      // })

      this.total = res.data.totalNum

      this.$message.success('获取订单列表成功')
    },
    async getCompanyList() {
      const { data: res } = await this.$http.get('/getCompanyList')
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }

      this.companyList = res.data
      // console.log(res)
    },

    async handleUpdateLog() {
      this.$refs.logFormRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          '/saveLogisticsInfo',
          this.logFormData
        )
        if (res.status !== 200) {
          return this.$message.error(res.message)
        }
        this.editLogDialog = false
        this.getOrderList()
        return this.$message.success(res.message)
      })
    },

    async handleShowLogDialog(id) {
      this.logFormData.order_id = id

      const { data: res } = await this.$http.get(
        '/getLogisticsInfoByOrder/' + id
      )
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }

      // console.log(res)
      this.logFormData.company_id = res.data.company_id
      this.logFormData.number = res.data.number

      this.editLogDialog = true
    },

    handleQueryOrder() {
      this.queryInfo.pageNum = 1
      this.getOrderList()
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrderList()
    },

    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getOrderList()
    }
  }
}
</script>

<style lang="less">
.goods-details {
  margin: 5px;
  display: inline-flex;
  width: 45%;
  height: 150px;
  line-height: 150px;
  vertical-align: top;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #ebeef5;

  .row {
    line-height: normal;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    .col {
      width: 100%;
      height: 100%;
      display: flex;

      align-items: center;
    }

    .col:nth-child(1) {
      flex: 2;
    }
    .col:nth-child(2) {
      flex: 29;
    }
    .col:nth-child(3) {
      flex: 10;
    }
  }

  .goods {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    img {
      margin-right: 10px;
      width: 100px;
      height: 100px;
    }

    .goods-info {
      display: flex;
      flex-direction: column;

      span {
        margin: 10px;
      }
    }
  }

  .details {
    justify-content: center;
    flex-direction: column;
  }
}
</style>
